<!doctype html>
<!--
@license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
  <meta charset="utf-8">
  <script src="../../../webcomponentsjs/webcomponents.js"></script>
  <script src="../../../web-component-tester/browser.js"></script>
  <script>
    Polymer = {dom: 'shadow'};
  </script>
  <link rel="import" href="../../polymer.html">
</head>
<body>
  <style is="custom-style">
    unknown-host {
      display: block;
    }

    :root {
      --border: 2px solid steelblue;
    }
  </style>

  <script>
    HTMLImports.whenReady(function() {
      // define unknown-host
      var proto = Object.create(HTMLElement.prototype);
      proto.createdCallback = function() {
        this.root = this.createShadowRoot();
      };
      document.registerElement('unknown-host', {prototype: proto});
    });
  </script>

  <dom-module id="x-foo">
    <style>
      :host {
        border: var(--border);
        display: block;
      }
    </style>
    <template>
      x-foo
    </template>
    <script>
    HTMLImports.whenReady(function() {
      Polymer({
        is: 'x-foo'
      });
    });
    </script>
  </dom-module>

  <dom-module id="x-nest">
    <style>
      :host {
        --border: 4px solid tomato;
      }
    </style>
    <template>
      <unknown-host id="unknown"></unknown-host>
    </template>
    <script>
    HTMLImports.whenReady(function() {
      Polymer({
        is: 'x-nest',

        attached: function() {
          this.$.unknown.root.appendChild(document.createElement('x-foo'));
        }
      });
    });
    </script>
  </dom-module>

  <script>
  suite('scoped-styling-unknown-host', function() {

    function assertComputed(element, value, pseudo) {
      var computed = getComputedStyle(element, pseudo);
      assert.equal(computed['border-top-width'], value, 'computed style incorrect');
    }

    /* eslint-disable no-unused-vars */
    function assertStylePropertyValue(properties, name, includeValue) {
      assert.property(properties, name);
      assert.include(properties[name], includeValue);
    }
    /* eslint-enable no-unused-vars */

    test('element in top level unknown host styled via property defaults', function() {
      var host = document.createElement('unknown-host');
      var foo = document.createElement('x-foo');
      host.root.appendChild(foo);
      document.body.appendChild(host);
      CustomElements.takeRecords();
      assertComputed(foo, '2px');
    });

    test('element in unknown host styled via containing polymer element', function() {
      var n = document.createElement('x-nest');
      document.body.appendChild(n);
      CustomElements.takeRecords();
      var foo = Polymer.dom(n.$.unknown.root).querySelector('x-foo');
      assertComputed(foo, '4px');
    });

  });


  </script>


</body>
